<template>
  <div id="app" :class="className">
    <!-- 一级路由的出口 -->
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      // className: {
      //   one: true
      // }
    }
  },
  computed: {
    className() {
      let c = ''
      if (this.$store.getters.theme === '#409EFF') {
        c = 'one'
      } else if (this.$store.getters.theme === '#1890FF') {
        c = 'two'
      } else if (this.$store.getters.theme === '#304156') {
        c = 'three'
      }
      return c
    }
  }
  // 需求 根据用户切换的颜色, 动态控制 app的类名
  // #409EFF one    #1890FF two     #304156   three
  /* if(this.$store.getters.theme === '#409EFF')  -- one
  if(this.$store.getters.theme === '#1890FF')  -- two
  if(this.$store.getters.theme === '#304156')  -- three */

  // 将计算出来的类名设置给了app, 'one' 'two' 'three'
  // .one {
  //   .navbar {
  //     background: this.$store.getters.theme,
  //     background-image: url(xxx)
  //   }
  // }
  // .two {
  //   .navbar {
  //     background: this.$store.getters.theme,
  //     background-image: url(xxx)
  //   }
  // }
  // .three {
  //   .navbar {
  //     background: this.$store.getters.theme,
  //     background-image: url(xx)
  //   }
  // }
}
</script>
